<template>
	<view class="container" v-if="loaded">
		<view class="banner">
			<swiper class="imageContainer" @change="handleChange" previous-margin="75rpx" next-margin="75rpx" circular>
				<block v-for="(item,index) in imgList" :key="index">
					<swiper-item class="swiperitem">
						<image class="itemImg" :class="currentIndex == index ? 'swiperactive': ''" :src="item.pic" lazy-load mode="scaleToFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		
		<view class="footer">
			<button class="btn" open-type="share">
				<image src="../../../static/fanli/314.png" mode="" class="icon"></image>
				<text>分享好友</text>
			</button>
			
			<view class="btn">
				<image src="../../../static/fanli/315.png" mode="" class="icon" @click="onSaveClick"></image>
				<text>保存图片</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { runGetInvite, JSMRequest } from '@/module/api'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'

	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		data() {
			return {
				loaded: false,
				imgList:[],
				currentIndex: 0,
				invite: '',
				sharePic: ''
			};
		},
		
		computed: {
			shareAppMessage () {
				let invite = this.userInfo.code
				return Object.assign(this.$store.state.shareAppMessage, {
					imageUrl: _.isEmpty(this.imgList)?"" : this.imgList[this.currentIndex].pic,
					path: !_.isEmpty(this.imgList) ? "/pages/index/index?scene=" + encodeURIComponent("iv="+invite) : ""
				})
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onShareAppMessage () {
			return this.shareAppMessage
		},
		
		onLoad() {
			this.getPageData()
		},
		
		methods:{
			getPageData () {
				let _t = this
				let invite = this.userInfo.code
				let data = {}
				data.scene = `iv=${invite}`
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				JSMRequest({
					tag: "jsm-userInfo-pic",
					params: data
				}).then(res => {
					uni.hideLoading()
					_t.imgList = res.data
					_t.loaded = true
					_t.onChangePic()
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				})
			},
			
			onChangePic () {
				let img = this.imgList[this.currentIndex]
				let invite = this.userInfo.code
				JSMRequest({
					tag: "jsm-userInfo-pic-share",
					params: {
						pic_id: img.id,
						scene: `iv=${invite}`
					},
					method: "POST"
				}).then(res => {
					uni.hideLoading()
					img.pic = res.data
					img.loaded = true
				})
			},
			
			onSaveClick () {
				console.log("保存图片")
				let _t = this
				let authSuccess = () => {
					let imgSrc = _t.imgList[this.currentIndex].pic
					uni.downloadFile({
						url: imgSrc,
						success: function (res) {
							console.log(res);
							//图片保存到本地
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function (data) {
									uni.showToast({
										title: '保存成功',
										icon: 'success',
										duration: 2000
									})
								},
								fail: function (err) {
									console.log(err);
									if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
										console.log("当初用户拒绝，再次发起授权")
										uni.openSetting({
											success(settingdata) {
												console.log(settingdata)
												if (settingdata.authSetting['scope.writePhotosAlbum']) {
													console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
												} else {
													console.log('获取权限失败，给出不给权限就无法正常使用的提示')
												}
											}
										})
									}
								}
							})
						}
					})
				}
				
				uni.getSetting({
					success(res) {
						console.log(res)
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope:'scope.writePhotosAlbum',
								success () {
									authSuccess()
								}
							})
						}else{
							authSuccess()
						}
					}
				})
			},
			
			handleChange (e) {
				this.currentIndex = e.detail.current
				!this.imgList[e.detail.current].loaded && this.onChangePic()
			}
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
</style>

<style lang="less">
	.banner{
		margin-top: 40px;
	}
	
	// 3D轮播样式
	.imageContainer {
		width: 100%;
		height: 920px;
	}
	
	.swiperitem {
		height: 920px;
		padding: 0upx 20upx;
		box-sizing: border-box;
		position: relative;
	}
	
	.itemImg {
		position: absolute;
		width: 95%;
		height: 860px;
		border-radius: 15rpx;
		z-index: 5;
		opacity: 0.7;
		top: 30px;
	}
	
	.swiperactive {
		width: 95%;
		opacity: 1;
		z-index: 10;
		height: 920px;
		top: 0px;
		transition: all .2s ease-in 0s;
	}
	
	.footer{
		height: 206px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: #F2F2F2;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		
		.btn{
			width: 285px;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F2F2F2;
			
			.icon{
				width: 120px;
				height: 120px;
				margin-bottom: 16px;
			}
			
			text{
				font-size: 28px;
				color: #333333;
			}
		}
	}
</style>
